<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header :showRefresh="false" @refresh="refresh" />
    <div class="page-main">
      <el-form
        class="form-area"
        label-position="left"
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
        label-width="140px"
      >
        <el-form-item label="申请标题" prop="title">
          <el-input v-model="ruleForm.title" />
        </el-form-item>
        <el-form-item label="提供平台" prop="platform">
          <el-select
            v-model="query.platform"
            placeholder="请选择申请平台"
            clearable
          >
            <el-option
              v-for="(item, index) in platformList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请部门" prop="orgId">
          <DeptFormSelect
            width="100%"
            ref="deptFormSelect"
            :name="ruleForm.orgName"
            :placeholder="`请选择申请部门`"
            v-model:dept="ruleForm.orgId"
          />
        </el-form-item>
        <el-form-item label="申请说明" prop="extra">
          <el-input
            type="textarea"
            maxlength="500"
            placeholder="请输入申请说明"
            show-word-limit
            v-model="ruleForm.extra"
          />
        </el-form-item>

        <el-form-item label="申请人" prop="contact">
          <el-input v-model="ruleForm.contact" />
        </el-form-item>
        <el-form-item label="申请人联系方式" prop="tel">
          <el-input v-model="ruleForm.tel" />
        </el-form-item>
        <el-form-item label="附件" prop="file">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">拖动文件或 <em>点击此处上传</em></div>
            <template #tip>
              <div class="el-upload__tip">
                支持docx，xls，PDF，PNG，JPG等类型的文件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <DynamicTable
        class="table-container"
        :showPagination="false"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
      <footer>
        <el-button>取消</el-button>
        <el-button :loading="loading" type="primary">提交</el-button>
      </footer>
    </div>
  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive, computed } from "vue";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import DynamicTable from "@/components/DynamicTable";
import DeptFormSelect from "@/components/DeptFormSelect/";

import useEditDrawer from "@/hooks/useEditDrawer";
import { useListManage } from "@/hooks";
import { UploadFilled } from "@element-plus/icons-vue";
import { createApp, updateApp } from "@/api/application";
import {
  getDataSourcePageList,
  deleteDataSource,
  getDataSourceDetail,
} from "@/api/adaptation";
export default defineComponent({
  name: "CascadeApplyAdd",
  components: {
    Header,
    FilterBar,
    DynamicTable,
    DeptFormSelect,
    UploadFilled
  },
  setup(props, { emit, slots }) {
    const query = reactive({
      search: null,
    });
    let {
      page,
      list,
      total,
      height,
      currentItem,
      editType,
      showEdit,
      refresh,
      listLoading,
      handleCreate,
      handleUpdate,
      handleDelete,
      getList,
      queryChange,
      showDetail,
      handleDetail,
    } = useListManage(props, emit, {
      getItems: getDataSourcePageList,
      query: query,
      getDetail: getDataSourceDetail,
      deleteItem: deleteDataSource,
      //   tableHeight: document.body.offsetHeight - 220
    });

    const tableColumns = ref([
      {
        label: "接口名称",
        key: "srcType",
      },
      {
        label: "所属应用",
        key: "srcName",
      },
      {
        label: "地区",
        key: "srcName",
      },
      {
        label: "所属部门",
        key: "srcName",
      },
      {
        label: "业务标签",
        key: "appName",
      },
      {
        label: "操作",
        fixed: "right",
        width: "100px",
        render: (h, params) => (
          <span>
            {
              <el-popconfirm
                title="确定删除吗？"
                confirmButtonText="好的"
                cancelButtonText="不用了"
                onConfirm={() => handleDelete(params.row)}
                v-slots={{
                  reference: () => (
                    <el-button type="text" size="small">
                      删除
                    </el-button>
                  ),
                }}
              />
            }
          </span>
        ),
      },
    ]);
    // 表单
    const DEFAULT_FORM = {
      title: null,
      orgId: null,
      orgName: null,
      extra: null,
      contact: null,
      tel: null
    };
    // 验证
    const rules = computed(() => {
      const baseRules = {
        title: [{ required: true, message: "请输入申请标题" }],
        extra: [{ required: true, message: "请输入申请说明" }],
        contact: [{ required: true, message: "请输入申请人" }],
        tel: [{ required: true, message: "请输入申请人联系方式" }],
        orgId: [
          { required: true, message: "请选择申请部门", trigger: "change" },
        ]
      };
      return baseRules;
    });
    const {
      loading,
      ruleForm,
      ruleFormRef,
      submit,
    } = useEditDrawer({
      createApi: createApp,
      editApi: updateApp,
      defaultForm: DEFAULT_FORM,
      emit,
      type: props.type,
      props,
    });
    ruleForm.value = {...DEFAULT_FORM}

    const platformList = reactive([])
    const getPlatformList = async() => {

    }
    onMounted(() => {
      getPlatformList();
      getList();
    });

    return {
      
      // 列表数据
      page,
      list,
      total,
      
      listLoading,
      query,
      tableColumns,
      queryChange,
      getList,
      // 编辑数据
      editType,
      handleCreate,
      currentItem,
      showEdit,
      refresh,
      // 表单相关
      platformList,
      ruleFormRef,
      ruleForm,
      rules,
    };
  },
});
</script>
<style lang="scss" scoped>
.upload-demo {
  width: 100%;
  :deep(.el-upload) {
    width: 100%;
    .el-upload-dragger {
      width: 100%;
    }
  }
}
.form-area {
  max-width: 1000px;
  margin-left: 10px;
}
.page-main {
  padding-top: 40px;
}
footer {
  margin-top: 20px;
  text-align: right;
}
</style>